import React from 'react'
import { Dropdown, Avatar, Badge } from 'antd'
import type { MenuProps } from 'antd'
import { UserOutlined, DownOutlined } from '@ant-design/icons'

export interface UserHeaderProps {
  userName: string
  menuItems: MenuProps['items']
}

const UserHeader: React.FC<UserHeaderProps> = ({ userName, menuItems }) => {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Badge count={3}>
        <Avatar shape="square" size="large" icon={<UserOutlined />} />
      </Badge>
      <Dropdown menu={{ items: menuItems }}>
        <a onClick={(e) => e.preventDefault()} style={{ color: 'inherit', marginLeft: 12 }}>
          {userName} <DownOutlined />
        </a>
      </Dropdown>
    </div>
  )
}

export default UserHeader